// 等页面加载完之后再运行，添加load
window.addEventListener('load', function () {
    // 获取
    // 左箭头
    var arrow_l = document.querySelector('.arrow-l');
    // 右边箭头
    var arrow_r = document.querySelector('.arrow-r');
    // 主图大盒子
    var focus = document.querySelector('.focus');
    // 图片的宽度
    var focusWidth = focus.offsetWidth;
    // 鼠标经过，箭头显示
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        // 当鼠标放上去的时候,停止播放,当鼠标离开时候,自动播放
        clearInterval(timer);
        timer = null;
    })


    // 鼠标离开，箭头隐藏
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        // 当鼠标放上去的时候,停止播放,当鼠标离开时候,自动播放
        timer=setInterval(function () {
            arrow_r.click();
        }, 2000);

    })
    // 创建小圆点Li, 并添加到ol
    // 根据ul的儿子的个数
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');


    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        // 创建Li之后给它添加索引
        li.setAttribute('index', i);
        ol.appendChild(li);


        //    创建了Li就可以给li添加点击事件，点谁谁白，排他思想
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';

            // 5. 点击小圆圈，移动图片 当然移动的是 ul
            // 这里需要给li自定义一个索引，
            //  在给li添加点击过程中的过程中获取li的索引
            // 这里必须用this，点击哪个li
            var index = this.getAttribute('index');
            // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
            // 图片的宽度要在最开始获取，这里已经发生变化
            // 调用动画移动函数,使用li的索引让主图移动,ul要向左移动，所以用负值

            num = circle = index;
            animate(ul, -index * focusWidth);
        })
    }
    ol.children[0].className = 'current';

    // 克隆第一张图片放到ul最后
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 点击右箭头，主图animate,这里需要声明一个变量作为右箭头的索引num,使用animate,图片移动的距离等于右箭头的索引*图片宽度的负值
    var num = 0;
    // circle 控制的是小圆点
    var circle = 0;
   
    arrow_r.addEventListener('click', function () {
        // 当走到最后一张图片的时候，要跳回第一张，此时定位为0，num重新等于0
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;

        }
        // 每点一下，num增加
        num++;
        // 移动的是ul,移动的目标宽度是num*图片的宽度
        animate(ul, -num * focusWidth);
        // 为了解决最后一张后面的空白问题，需要克隆第一张图片放到ul的最后


        // 点击右箭头的时候小圆圈也在变化，所以要放在点击右箭头里面
        // 每点击一下右箭头，circle就要加一次
        circle++;
        // 当circle跟着右箭头走到最后一张照片的时候，复原重新开始
        if (circle == ol.children.length) {
            circle = 0;
        }
        circleChange();



    })

    // ol小圆圈的排他函数
    function circleChange() {
        // 先清除其余小圆圈的current类名
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        // 留下当前的小圆圈的current类名
        ol.children[circle].className = 'current';

    }

    // 最后就是定时播放
    // 当鼠标放上去的时候,停止播放,当鼠标离开时候,自动播放
    // 每两秒钟定时播放一次右键点击事件
    var timer = setInterval(function () {
        arrow_r.click();
    }, 2000);
});


